import React, { FC, useEffect, useState } from 'react'
import './index.less'
import { IRouteComponentProps } from 'umi'
import { Form, Input, Button, Checkbox, Radio } from 'antd';
import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite';
import { inteLoginItem } from '@/utils/interface'
const App: FC<IRouteComponentProps> = ({history}) => {
  let { login } = useStore()
  useEffect(() => {
    login.logout()
  }, [])
  
  const onFinish = async (values: inteLoginItem) => {
    if(values.key == 'login'){
      let putlogin = await login.getLogin({username:values.username,password:values.password})
      if (putlogin) {
        localStorage.setItem("username",values.username)
        history.replace('/management/houselist',{username:values.username})
      }
    }else if(values.key == 'registry'){
      let res=await login.getregistry({username:values.username,password:values.password})
     
    }
  };
  
  return (
    <div className='login'>
      <Form
        name="normal_login"
        className="login-form"
        onFinish={onFinish}
      >
        <h2>后台管理系统</h2>
        <Form.Item name="username" rules={[{ required: true, message: '用户名不能为空' }]} >
          <Input type="username" placeholder="账号" />
        </Form.Item>

        <Form.Item name="password" rules={[{ required: true, message: '密码不能为空' }]}  >
          <Input type="password" placeholder="密码" />
        </Form.Item>
       
        <Form.Item>
          <div className='xue_teacher'>
            <Form.Item name='key'>
              <Radio.Group>
                <Radio value='login'>登陆</Radio>
                <Radio value='registry'>注册</Radio>
              </Radio.Group>
            </Form.Item>
          </div>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
export default observer(App)